{% extends 'base.html' %}
{% block title %} - Project {{project.name}}{% endblock %}

{% block js %}
<style type="text/css">
<!--
#apDiv1 {
	position:absolute;

	width:862px;

	z-index:1;
	background-color: #1a1a1a;
}
#apDiv2 {
	position:absolute;
	left:15px;
	top:305px;
	width:600px;
	min-height:100px;
	height:relative;
	z-index:2;
	background-color: #1A1A1A;
	overflow: auto;
	font-size: 14px;
	color: b3995d;
}
#apDiv3 {
	position:absolute;
	left:615px;
	top:305px;
	width:400px;
	min-height:100px;
	height:relativex;
	z-index:3;
	background-color: #1A1A1A;
}
#apDiv4 {
	position:absolute;
	left:15px;
	top:550px;
	width:600px;
	height:330px;
	z-index:4;
	background-color: #1A1A1A;
}
#apDiv5 {
	position:absolute;
	left:615px;
	top:550px;
	width:400px;
	height:330px;
	z-index:5;
	background-color: #1A1A1A;
}
#apDiv6 {
	position:absolute;
	left:15px;
	top:892px;
	width:1000px;
	height:300px;
	z-index:6;
	background-color: #1A1A1A;
}
#apDiv7 {
	position:absolute;
	left:15px;
	top:1197px;
	width:1000px;
	height:230px;
	z-index:7;
	background-color: #1A1A1A;
}
body {
	background-color: #262626;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	color: b3995d;
}
#apDiv8 {
	position:absolute;
	left:40px;
	top:20px;
	width:56px;
	height:62px;
	z-index:8;
}
table_white {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	color: #FFF;
}
#table_white {
}
-->
</style>
<link href="/site_media/css/Title_white.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/site_media/js/flowplayer-3.0.3.min.js"></script>
<script type="text/javascript">
	var player = flowplayer("player", "/site_media/flowplayer-3.2.2.swf", {
		clip: {
			url: '/{{pv}}',
			provider: 'h264streaming',
			autoPlay:false,
			autoBuffering:true,
			scaling: "scale"
		},
		plugins: {
			h264streaming: {
				url: '/site_media/flowplayer.pseudostreaming-3.2.2.swf'
			},
			controls: {
				playlist: true,
				url: '/site_media/flowplayer.controls-3.2.1.swf',
				play:true,
				stop:true,
				fullscreen:true,
				scrubber: true
			}
		}
	});	
	
	function play_project_file(video_path, video_title, video_text){
		$("#player").html('').css('display','');
		$("#youtube").html('');
		flowplayer("player", "/site_media/flowplayer-3.2.2.swf", {
			clip: {
				url: '/' + video_path,
				provider: 'h264streaming',
				autoPlay:false,
				autoBuffering:true,
				scaling: "scale"
			},
			plugins: {
				h264streaming: {
					url: '/site_media/flowplayer.pseudostreaming-3.2.2.swf'
				},
				controls: {
					playlist: true,
					url: '/site_media/flowplayer.controls-3.2.1.swf',
					play:true,
					stop:true,
					fullscreen:true,
					scrubber: true
				}
			}
		});	
		
		$("#video_title").html(video_title);
		$("#video_description").html(video_text);
	}

	function play_youtube(youtube){
		$("#player").html('').css('display','none');
		i_html = '<object width="600" height="330"> ' +
			'<param name="movie" value="http://www.youtube.com/v/'+
			youtube +'&amp;hl=zh_CN&amp;fs=1"></param>' +
			'<param name="allowFullScreen" value="true"></param>' +
			'<param name="allowscriptaccess" value="always"></param>' +
			'<embed src="http://www.youtube.com/v/' + youtube +
			'&amp;hl=zh_CN&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="600" height="330"></embed></object>';

		document.getElementById('youtube').innerHTML =  i_html;
	}
	
	
	function safe_url(){
		var a = window.open("/project/{{project.id}}/safe_url/", null, 'height=220, width=630, top=400, left=400, resize=no' );
	}
function MM_setTextOfLayer(objId,x,newText) { //v9.0
  with (document) if (getElementById && ((obj=getElementById(objId))!=null))
    with (obj) innerHTML = unescape(newText);
}
</script>
{% endblock %}

{% block content %}



<link href="/media/css/Title_white.css" rel="stylesheet" type="text/css" />


<body onLoad="MM_preloadImages('Images/Artist_work02_big.jpg','Images/Artist_work03_big.jpg','Images/Artist_work04_big.jpg','Images/Artist_work05_big.jpg','Images/Artist_work01_big.jpg')">
<div id="content" style="position:absolute; top:20px; left:0px; width:1000px; height:relative; background-color: #1A1A1A; layer-background-color: #1A1A1A; border: 1px none #000000;">

<table>
<tr><td colspan="2">

  <table width="100%" border="0" cellspacing="10">
    <tr><td class="Headline_player">Thanks for letting us pitch on this great Job.</td></tr>
  </table>
  <table width="980" height="8" cellpadding="0" cellspacing="0">
    <tr class="text">
      <td width="76" bgcolor="#b3995d"></td>
      <td width="922" bgcolor="#323232"></td>
    </tr>
  </table>
  <table border="0" align="left" cellpadding="0" cellspacing="10">
    <tr>
      <th class="Headline_white">Project:</th>
      <td><span class="Title_Proj_name">{{project.name}} {{email.email}}</span></th>
    {% if user.username == 'kth' or user.id == project.creator.id %}
	<td><button onClick="window.location.href='/project/{{project.id}}/edit/';">Edit</button>
	<td><button onClick="safe_url();">Safe URL</button></td>
	{% endif %}
    </tr>
    <tr>
      <th class="Headline_white">Brand:</th>
      <td class="Title_Proj_info2" colspan="3">{{project.brand}}</td>
    </tr>
    <tr>
      <th class="Headline_white">For You:</th>
      <td class="Title_Proj_info2" colspan="3"></td>
    </tr>
    <tr>
      <td class="Headline_white_small">Producer:</td>
      <td class="Title_project_info_small" colspan="3">
		<span class="text">
			{{project.creator.first_name}}, {{project.creator.last_name}}
            <a href="mailto:{{project.creator.email}}">{{project.creator.email}}</a>
		</span></td>
    </tr>
    <tr>
      <td class="Headline_white_small">Supervision:</td>
      <td class="Title_project_info_small" colspan="3"><span class="text">{{project.creator.first_name}}, {{project.creator.last_name}} ({{project.creator.username}})</span><br/></td>
    </tr>

  </table>

</td></td>



<tr><td>

  <table width="562" border="0" cellspacing="10">
    <tr>
      <td class="text"><p>Dear Client,</p>
		  <p>{{project.description|safe}}</p><br/>
      </td>
    </tr>
  </table>
</td>




<td>

  <table width="100%" border="0" align="center" cellspacing="10" class="text"> 
  	<tr>
    	<td>Attachments<td>
	</tr>   
	{% for pfs in pfss %}
    {% for pf in pfs %}
	{% if pf.show %}    
	
    <tr>
    	<td class="Headline_white_small">
			{{pf.title}}
		</td>
		<td>&gt;
			<a href="?m={{pf.id}}" onClick="play_youtube('{{p.youtube}}');MM_setTextOfLayer('video_title','','{{ pf.title }}');MM_setTextOfLayer('video_description','','{{ pf.text }}')">Show Attachment</a><br/>
		</td>
	</tr>
	{% endif %}
    {% endfor %}
    {% endfor %}
    
    {% for attachment in attachments %}
    	<tr>
    	<td class="Headline_white_small">
			{{attachment.title}}
		</td>
	   </tr>
	{% endfor %}
  </table>

</td></tr>



<tr><td>
	<div id="youtube"></div>
	<div id="player" style="display:block;width:600;height:330px;"></div>	
</td>



<td>
  <table width="350" border="0" cellspacing="10">
    <tr>
      <td width="363" class="Headline_player" id="video_title"></td>
    </tr>
    <tr>
      <td class="Headline_player" id="video_artist"></td>
    </tr>
    <tr>
      <td class="Headline_white_small">Comment</td>
    </tr>
    <tr>
      <td class="text" id="video_description"></td>
    </tr>
  </table>
</td></tr>





  <table width="100%" border="0" cellspacing="10">
    <tr>
      <th class="Headline_white" colspan="6"><br/>Artists:</th></tr>
	{% for pas in pass %}
    <tr>
		{% for pa in pas %}
		<td>
			{% if pa.video == '' %}
				<a href="?a={{pa.artist.get_profile.film}}/" title="{{ pa.artist.get_profile.client_text}} ">
					{% load zdy_filter %}
					<img src="/{{pa.artist.get_profile.film|get_file_name}}.jpg" border="5" height="80">
				</a>
			{% else %}
				<a href="?a={{pa.video}}" title="{{ pa.artist.get_profile.client_text }}">
					{% load zdy_filter %}
					<img src="/{{pa.video|get_file_name}}.jpg" border="5" height="80">
				</a>
			{% endif %}
		   <br/>
          {{pa.artist.first_name}} {{pa.artist.last_name}}</a><br/>
              {{pa.artist.get_profile.role}}
		</td>
        	

		{% endfor %}
        </tr>
	{% endfor %}
    <a href="/video/{{movie.id}}/">    
     </a>

  </table>





<tr><td colspan="2">

  <table width="100%" border="0" cellspacing="10">
    <tr>
      <th class="Headline_white" colspan="6"><br/>Moods/References:</th>
    </tr>
           
		{% for pys in pys %}
	<tr>
		{% for p in pys %}
        {% if p.show %}
		<td align="left">

			<a href="javascript:;" onClick="play_youtube('{{p.youtube}}');MM_setTextOfLayer('video_title','','{{ p.youtube_title }}');MM_setTextOfLayer('video_description','','{{ p.youtube_text }}')" >
				<img src="http://img.youtube.com/vi/{{p.youtube}}/0.jpg" height="80" border="5"/><br/>
           {% if p.youtube_title != "" %}
	       {{ p.youtube_title }}
	       {% endif %}
			</a>

		</td>
        {% endif %}
		{% endfor %}
    </tr>
    
     </tr>
           
		{% for mood in moods %}
        {% if mood.show %}
		<td align="left">
			{{moods.title}}
		</td>
        {% endif %}
		{% endfor %}

{% endfor %}
        
  </table>
</td></tr>

<tr><td colspan="2">
  <table width="100%" border="0" cellspacing="10"> 
  
 
    {% for pfs in pfss %} 	
        <tr>
    {% for pf in pfs %}    
	{% if pf.show %}

		<td>
			<a href="#" onClick="play_project_file('{{pf.file}}','{{pf.title}}','{{pf.text}}');return false;">
			<img src="/{{pf.file.name|get_project_file_img}}" height="80" border="5"></a><br/>{{pf.title}}
		</td>
	
	{% endif %}
        {% endfor %}
    </tr>
		{% endfor %}
  </table>
</td></td>
<tr><td align="left"><FORM><INPUT TYPE="button" VALUE="Back" onClick="history.go(-1);return true;"> </FORM></td></td

></table>

</div>


</body>

{% endblock %}